<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员注册</title>
    <!-- 引入Vue.js -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI -->
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <script src="../../js/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 注册容器样式 */
        .register-container {
            width: 100%;
            max-width: 480px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .register-container:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }

        /* 注册头部样式 */
        .register-header {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            padding: 28px 20px;
            text-align: center;
            position: relative;
        }

        .register-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #4b6cb7, #182848);
        }

        .register-header h2 {
            color: #ffffff;
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.5px;
            margin: 0;
        }

        /* 注册表单样式 */
        .register-form {
            padding: 30px 35px;
        }

        /* 表单项样式 */
        .el-form-item {
            margin-bottom: 22px;
        }

        .el-input, .el-select {
            height: 46px;
            border-radius: 6px !important;
            border: 1px solid #e1e5eb !important;
            transition: all 0.2s ease;
        }

        .el-input:hover, .el-select:hover {
            border-color: #a0aec0 !important;
        }

        .el-input:focus-within, .el-select:focus-within {
            border-color: #4b6cb7 !important;
            box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.1) !important;
        }

        .el-input__inner, .el-select .el-input__inner {
            height: 46px !important;
            font-size: 14px;
            padding: 0 14px;
            border: none !important;
            color: #2d3748;
        }

        .el-input__inner::placeholder {
            color: #a0aec0;
        }

        .el-icon-user, .el-icon-lock, .el-icon-message, .el-icon-phone, .el-icon-mobile-phone, .el-icon-key {
            color: #a0aec0;
            font-size: 16px;
        }

        /* 验证码容器 */
        .captcha-container {
            display: flex;
            gap: 12px;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-image {
            width: 110px;
            height: 46px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 2px;
            color: #4b6cb7;
            cursor: pointer;
            border: 1px solid #e1e5eb;
            transition: all 0.2s ease;
            user-select: none;
        }

        .captcha-image:hover {
            background: linear-gradient(135deg, #e4e8f0 0%, #d5dae5 100%);
            border-color: #c3cfe2;
        }

        /* 注册按钮样式 */
        .el-button--primary {
            width: 100%;
            height: 48px;
            border-radius: 6px;
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            border: none;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s ease;
            margin-top: 10px;
            letter-spacing: 0.5px;
        }

        .el-button--primary:hover {
            background: linear-gradient(135deg, #405ca3 0%, #14203d 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(75, 108, 183, 0.2);
        }

        .el-button--primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(75, 108, 183, 0.2);
        }

        /* 底部链接样式 */
        .footer-links {
            text-align: center;
            padding: 0 35px 30px;
            font-size: 14px;
            color: #718096;
        }

        .footer-links a {
            color: #4b6cb7;
            text-decoration: none;
            transition: all 0.2s ease;
            padding: 4px 8px;
            border-radius: 4px;
            margin-left: 5px;
            font-weight: 500;
        }

        .footer-links a:hover {
            color: #182848;
            background-color: rgba(75, 108, 183, 0.1);
        }

        /* 消息提示框样式优化 */
        .el-message {
            min-width: 300px !important;
            border-radius: 8px !important;
            padding: 14px 18px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .el-message__content {
            font-size: 14px !important;
        }

        /* 表单分组样式 */
        .form-section {
            margin-bottom: 25px;
            position: relative;
        }

        .form-section-title {
            font-size: 15px;
            color: #4b6cb7;
            margin-bottom: 16px;
            padding-left: 10px;
            border-left: 3px solid #4b6cb7;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        /* 响应式调整 */
        @media (max-width: 520px) {
            .register-container {
                max-width: 100%;
            }

            .register-form {
                padding: 25px 20px;
            }

            .footer-links {
                padding: 0 20px 25px;
            }
        }
    </style>
</head>
<body>
<!-- 注册表单容器 -->
<div id="app" class="register-container">
    <div class="register-header">
        <h2>管理员注册</h2>
    </div>

    <el-form :model="registerForm" ref="registerForm" class="register-form" :rules="registerRules" label-width="0">
        <!-- 登录信息部分 -->
        <div class="form-section">
            <div class="form-section-title">登录信息</div>
            <el-form-item prop="userName">
                <el-input
                        v-model="registerForm.userName"
                        placeholder="请输入用户名"
                        prefix-icon="el-icon-user"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input
                        v-model="registerForm.password"
                        type="password"
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                        show-password
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="confirmPassword">
                <el-input
                        v-model="registerForm.confirmPassword"
                        type="password"
                        placeholder="请确认密码"
                        prefix-icon="el-icon-lock"
                        show-password
                        clearable
                        @keyup.enter.native="handleRegister">
                </el-input>
            </el-form-item>
        </div>

        <!-- 个人信息部分 -->
        <div class="form-section">
            <div class="form-section-title">个人信息</div>
            <el-form-item prop="realName">
                <el-input
                        v-model="registerForm.realName"
                        placeholder="请输入真实姓名"
                        prefix-icon="el-icon-user"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="gender">
                <el-select v-model="registerForm.gender" placeholder="请选择性别" style="width: 100%">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                    <el-option label="保密" value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="phone">
                <el-input
                        v-model="registerForm.phone"
                        placeholder="请输入手机号码"
                        prefix-icon="el-icon-mobile-phone"
                        clearable
                        maxlength="11">
                </el-input>
            </el-form-item>

            <el-form-item prop="email">
                <el-input
                        v-model="registerForm.email"
                        placeholder="请输入邮箱地址"
                        prefix-icon="el-icon-message"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="address">
                <el-input
                        v-model="registerForm.address"
                        placeholder="请输入详细地址"
                        type="textarea"
                        :rows="2"
                        clearable>
                </el-input>
            </el-form-item>

            <!-- 验证码部分 -->
            <el-form-item prop="captcha">
                <div class="captcha-container">
                    <el-input
                            class="captcha-input"
                            v-model="registerForm.captcha"
                            placeholder="请输入验证码"
                            prefix-icon="el-icon-key"
                            clearable>
                    </el-input>
                    <div class="captcha-image" @click="refreshCaptcha">
                        {{ captchaText }}
                    </div>
                </div>
            </el-form-item>
        </div>

        <el-button
                type="primary"
                @click="handleRegister"
                :loading="loading">
            注册
        </el-button>
    </el-form>

    <div class="footer-links">
        已有账号？<a href="/vegetablemarketexpress/html/back/login.html" @click.prevent="goToLogin">立即登录</a>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            // 自定义密码确认验证规则
            var validatePassConfirm = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            // 手机号验证规则
            var validatePhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入手机号码'));
                } else if (!/^1[3-9]\d{9}$/.test(value)) {
                    callback(new Error('手机号格式不正确'));
                } else {
                    callback();
                }
            };

            // 邮箱验证规则
            var validateEmail = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入邮箱地址'));
                } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
                    callback(new Error('邮箱格式不正确'));
                } else {
                    callback();
                }
            };

            return {
                registerForm: {
                    userName: '',
                    password: '',
                    confirmPassword: '',
                    realName: '',
                    gender: '',
                    phone: '',
                    email: '',
                    address: '',
                    captcha: ''
                },
                captchaText: '获取验证码',
                loading: false,
                registerRules: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 20, message: '用户名长度需在3-20个字符之间', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 32, message: '密码长度需在6-32个字符之间', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, validator: validatePassConfirm, trigger: 'blur'}
                    ],
                    realName: [
                        {required: true, message: '请输入真实姓名', trigger: 'blur'},
                        {min: 2, max: 10, message: '姓名长度需在2-10个字符之间', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    phone: [
                        {required: true, validator: validatePhone, trigger: 'blur'}
                    ],
                    email: [
                        {required: true, validator: validateEmail, trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'},
                        {min: 5, max: 100, message: '地址长度需在5-100个字符之间', trigger: 'blur'}
                    ],
                    captcha: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                        {len: 4, message: '验证码为4位数字', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            //this.refreshCaptcha();
        },
        methods: {
            refreshCaptcha() {
                const _this = this;
                console.log('refreshCaptcha');
                axios.get('/vegetablemarketexpress/user/registerCaptcha')
                    .then(response => {
                        if (response.data.code == 200) {
                            _this.captchaText = response.data.data;
                        } else {
                            _this.$message.error('验证码获取失败');
                        }
                    })
                    .catch(error => {
                        console.error('验证码获取错误:', error);
                        _this.$message.error('验证码获取异常，请检查网络');
                    });
            },
            handleRegister() {
                this.$refs.registerForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        const _this = this;

                        // 构造用户对象，映射字段名
                        const user = {
                            userName: this.registerForm.userName,
                            password: this.registerForm.password,
                            nickName: this.registerForm.realName,
                            sex: this.registerForm.gender,
                            phonenumber: this.registerForm.phone,
                            email: this.registerForm.email,
                            remark: this.registerForm.address
                        };

                        // 发送注册请求
                        axios.post('/vegetablemarketexpress/user/registerAdmin?captcha=' + encodeURIComponent(this.registerForm.captcha), user)
                            .then(response => {
                                this.loading = false;
                                if (response.data.code == 200) {
                                    _this.$message({
                                        message: '注册成功，即将跳转到登录页面',
                                        type: 'success',
                                        duration: 1500
                                    });

                                    // 延迟跳转到登录页面
                                    setTimeout(() => {
                                        window.location.href = '/vegetablemarketexpress/html/back/login.html';
                                    }, 1500);
                                } else {
                                    _this.$message.error(response.data.message || '注册失败，请稍后重试');
                                    // 刷新验证码
                                    _this.refreshCaptcha();
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('注册请求错误:', error);
                                _this.$message.error('注册请求异常，请检查网络或联系管理员');
                                // 刷新验证码
                                _this.refreshCaptcha();
                            });
                    } else {
                        return false;
                    }
                });
            },
            goToLogin() {
                window.location.href = '/vegetablemarketexpress/html/back/login.html';
            }
        }
    });
</script>
</body>
</html>